<ul id="iconlistfm" style="padding: 5px;">
    <template v-for="(vo,index) in list">

        <template v-if="vo.class==selected">
            <li style="float: left;padding: 10px;height:22px;width:22px;border: #f12111 1px solid;" @click="check(vo.class)">
            <i style="font-size: 22px;width:22px;height:22px;color: #F33436;" :class="'iconfont '+vo.class"></i>
            </li>
        </template>
        <template v-else>
            <li style="float: left;padding: 10px;height:22px;width:22px;border: #fff 1px solid;border-bottom: #f1f1f1 1px solid;" @click="check(vo.class)">
            <i style="font-size: 22px;width:22px;height:22px;color: #D0DCDF;" :class="'iconfont '+vo.class"></i>
            </li>
        </template>
    </template>
</ul>

<script>
    var iconlistVm = new Vue({
        el: '#iconlistfm',
        data: {
            selected: '',
            list: JSON.parse('<?php echo json_encode($dataset);?>'),
        },
        methods: {
            check: function(selectedClass){
                iconlistVm.selected = selectedClass;
            },
            submit: function () {
                $.post('/admin/icon/list', null, function (data) {
                    if (data.ret == 0) {
                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            timeout: 3000,
                            showType: 'slide'
                        });
                        $('#iconaddfm').form('clear');
                        $("#icondlg").dialog('close');
                        $("#icon").treegrid('reload');
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                }, 'json');
            }
        }
    });
</script>
